import React, { useState } from 'react';
import {Button, Icon, Modal, Table, TableProps, Empty} from 'antd';

const App = (props) => {
  const [open, setOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('Content of the modal');

  const showModal = () => {
    setOpen(true);
  };

  const handleOk = () => {
    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setOpen(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setOpen(false);
  };

  const columns: TableProps<any>['columns'] = [
    {
      title: '显示名称',
      dataIndex: 'title',
      key: 'title',
      render: (text) => <a>{text}</a>,
    },
    {
      title: '启用',
      key: 'no',
    },
    {
      title: '固定列',
      ellipsis: true,
      key: 'updateTime',
    }
  ];

  React.useImperativeHandle(props.onRef, () => {
    return {
      showModal: showModal,
    };
  });
  return (
    <>
      <Modal
        title="表格配置"
        open={open}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        width={1200}
      >
        <div style={{display: "flex"}}>
          <div>更新人：张三</div>
          <div>更新时间：2025-4-22</div>
        </div>

        <div style={{display: 'flex',justifyContent: 'space-between'}}>
          <div style={{width: '700px',border: '1px solid red'}}>
            <Table columns={columns} dataSource={props.data.slice(0,props.data.length-1)} scroll={{ x: 'max-content' }}/>
          </div>
          <div style={{border: '1px solid red',width: '500px'}}>
            <Empty style={{marginTop: '80px'}} />
          </div>
        </div>
      </Modal>
    </>
  );
};

export default App;
